<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{
            background-color: pink;
        } */
        .box{ 
            /* 设置弹性可以设置宽高 */
            display: flex;
          
            position: absolute;
            right: 0;
           bottom: 0;
            width: 150px;
            height:230px;
            /* border: solid; */

            background-image: url("./[L42TQPOF\(}LWB4I43{DYPH.png");
            
            /* animation: run 800ms steps(6) 0s 15; */
        }
        .box:hover{
            background-position: -140px 0px;
        }
        /* 定义动画 */
        @keyframes run{
            to{
                background-position: 892px 30px;
            }
        }
     .bo{
         width: 100%;
         height: 1500px;
         background-color: aqua;
         position: relative;
     }
    </style>
</head>
<body>
 <div class="bo">
   <div class="box">
</div>
 
</div>
  <script>
      var bo=document.querySelector(".bo")
      var box=document.querySelector(".box")
      var step=20
//获得焦点显示火箭
console.log(box.offsetTop);
 box.addEventListener("mouseover",function(){ 
    // console.log(e);
    this.classList.add("box1")
 })
 
 //火箭升空
    box.addEventListener("click",function(){
        this.style.animation=" run 800ms steps(6) 0s 15"
     var timer= setInterval(function(){
          box.style.top=box.offsetTop-20+"px"
      },16)
//滚动条为0时清除定时器
    var timer= setInterval(() => {
      document.documentElement.scrollTop -= step;
      if(document.documentElement.scrollTop==0){
        // box.style.display="none"
        clearInterval(timer)
    }
    }, 16);
    })
    document.addEventListener("scroll",function(){
        box.style.display="black"
    })
  </script>
</body>
</html>